<template>
    <div>
      <b-navbar toggleable="lg" type="dark">
        <!-- <b-navbar-brand to="/" type="dark" class="ml-5">燃烧动力学平台2.0 </b-navbar-brand> -->
        <div class="navbar center">
          <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
          <b-collapse is-nav id="nav_collapse">
            <b-navbar-nav id="nav-addr">
              <b-nav-item class="addr-gap" @click="gotoTopPage()">平台首页</b-nav-item>
              <b-nav-item  class="addr-gap" to="/ccdata/home"
                :class="{ myactive: /\/home/.test($route.path) }">数据库主页</b-nav-item>
              <b-nav-item class="addr-gap"
                :class="{ myactive: /(\/doc\/[a-z]+|\/mech\/carnot)$/.test($route.path) }">使用说明</b-nav-item>
  
              <b-nav-item-dropdown text="数据库分类" class="addr-gap"
                :class="{ myactive: /(([^c]|^)\/thermo|\/thermo_result|\/kinetics|\/kinetics_result|([^c]|^)\/transfer|\/exp_search|\/database\/mech|\/database\/mech\/data|\/chishui|\/mechall|\/mechall\/[1-3]|\/mechall\/[1-3]\/[a-z0-9]+|\/gen|\/gen\/result\/[1-2]\/[a-z0-9]+|\/firedelay|\/fire_prop|\/hotpro|\/species_conc)$/i.test($route.path) }">
                <b-dropdown-item  to="/basic" @click="changeActive(1)">理化性能数据库</b-dropdown-item>
                <b-dropdown-item  to="/kinetics">动力学数据库</b-dropdown-item>
                <b-dropdown-item  to="/transfer">输运数据库</b-dropdown-item>
                <b-dropdown-item  to="/exp_search" id="expall">燃料特性数据库</b-dropdown-item>

              </b-nav-item-dropdown>
  
              <b-nav-item-dropdown text="数据汇交" class="addr-gap"
                :class="{ myactive: /\/thermo\/data_collect/i.test($route.path) }">
                <!-- <b-dropdown-item v-for="item in [
                { id: 0, name: '理化性能数据库', to: '/thermo/data_collect', disabled: false },
                { id: 1, name: '输运数据库', to: '', disabled: true },
                { id: 2, name: '动力学数据库', to: '', disabled: true },
                { id: 3, name: '燃料特性数据库', to: '', disabled: true }
              ]" :key="item.id" :to="item.to" @click="dataPage(item)" :class="{ 'drop-item-disabled': item.disabled }">{{
                item.name }}汇交</b-dropdown-item> -->
                <b-dropdown-item v-for="item in [
                { id: 0, name: '数据导入', to: '/ccdata/data_get_in', disabled: false },
                { id: 1, name: '数据导出', to: '/ccdata/data_get_out', disabled: false },
  
              ]" :key="item.id" :to="item.to" @click="dataPage(item)" :class="{ 'drop-item-disabled': item.disabled }">{{
                item.name }}</b-dropdown-item>
              </b-nav-item-dropdown>
  
              <b-nav-item  class="addr-gap"
                :class="{ myactive: /(\/about|\/cklabout)$/i.test($route.path) }" target="_blank">关于我们</b-nav-item>
            </b-navbar-nav>
            <!-- Right aligned nav items -->
            <b-navbar-nav class="ml-5">
  
              <!-- <b-nav-item to="/register" v-show="!$auth.check()">注册</b-nav-item> -->
              <b-nav-item to="/login">登录</b-nav-item>
            </b-navbar-nav>
  
          </b-collapse>
        </div>
      </b-navbar>
      <div>
       
      </div>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'NavBar',
    components: {
    },
    data() {
      return {
        activeShow: 0,
        userName: '',
        userType: "",
        fail_modal: false,
      }
  
    },
    watch: {

    },
    mounted() {

    },
    computed: {
    
    },
    methods: {
      dataPage(e) {
        this.$router.push({ path: e.to })
      },
      gotoTopPage() {
        console.log('111111111', config.pageHost);
        window.location.href = config.pageHost;
        // 'http://cds.eshejie.com';
      },
      changeActive(ins) {
        this.activeShow = ins
      },
      fetchUser() {
        this.$http.get('/user/user')
          .then(res => {
            // console.log(res.data)
            this.userName = res.data.userName
            this.userType = res.data.userType
          }, error => {
            console.log(error)
          })
      },
      logout() {
        this.$auth.logout({
          makeRequest: true,
          success() {
            this.$router.push({ path: '/' })
            console.log('success ' + this.context)
          },
          error(err) {
            this.$router.push({ path: '/' })
            console.log('error ' + this.context, err)
          }
        })
      },
      // manage_user_info(){
      //     console.log("点击我的账户")
      //     var manage_url="http://localhost:8080/#/manage_user_info?token="+this.mytoken;
      //     window.open(manage_url, '_blank');
      // }
  
    }
  }
  </script>
  
  <style scoped>
  .disabled {
    opacity: 0.75;
  }
  
  @media screen and (max-width: 992px) {
    div>>>.navbar {
      padding-left: 0;
      padding-right: 0;
    }
  
    div>>>.navbar.center {
      width: 100%;
    }
  
    div>>>.navbar.center button {
      display: block;
      margin: auto;
      margin-bottom: 10px;
    }
  
    div>>>.addr-gap {
      margin-left: 0 !important;
    }
  
    div>>>.navbar-collapse.collapse.show ul:first-child li:nth-child(2n+1) {
      background-color: rgb(196, 82, 22);
    }
  }
  
  div>>>.navbar-nav .myactive {
    border-color: #ffafa4;
  }
  
  .drop-item-disabled {
    color: rgb(188, 193, 199);
  }
  
  .nav-item>a>a {
    color: white;
  }
  
  .myfont {
    font-size: 1.2rem;
    color: black;
  }
  
  .myfont:hover {
    color: blue
  }
  
  .navbar-brand {
    line-height: 1.5rem;
    margin-right: 0rem;
    margin-left: 10rem !important;
    font-size: 3rem !important;
  }
  
  @media screen and (max-width: 1564px) {
    .navbar-brand {
      line-height: 1.5rem;
      margin-right: 0rem;
      margin-left: 1rem !important;
      font-size: 2.1rem !important;
    }
  
    #nav-addr {
      font-size: 1.5rem;
    }
  }
  
  @media screen and (max-width: 1250px) {
    .navbar-brand {
      line-height: 1.5rem;
      margin-right: 0rem;
      margin-left: 1rem !important;
      font-size: 2rem !important;
    }
  
    #nav-addr {
      font-size: 1.3rem;
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 1100px) {
    #nav-addr {
      font-size: 1.2rem !important;
    }
  
    .addr-gap {
      margin-left: 0.6rem;
    }
  }
  </style>
  